﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Sinbiota.Web.Models.StatisticsPageModel>" %>

<%@ Import Namespace="Localization" %>

<%@ Import Namespace="Sinbiota.Web.Controllers" %>

<%@ Import Namespace="Sinbiota.Web.Extensions" %>
<asp:Content ID="header" ContentPlaceHolderID="HeadContent" runat="server">
    <script src="<%: Url.Content("~/Scripts/highcharts/highcharts.js")%>" type="text/javascript"></script>
    
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <%: Strings.SinbiotaDBStatistics%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2 class="text-center"><%: Strings.SinbiotaDBStatistics%> <img alt="loading..." id="LoadingId" style="display:none;" src='<%: Url.WaitingImage() %>' /></h2>
    <div class="row">
        <div class="four columns">
        <h3><%: Strings.GeneralData %></h3>
        <div class="panel">
            <%: Html.DisplayFor(x => x.Statistics, "Table") %>
        </div>
        <%--Occurrence and Species Statistics--%>
        <% using (Ajax.BeginForm("GetOccurrenceStatistics", null, new AjaxOptions { UpdateTargetId = "StatisticsResult", LoadingElementId = "LoadingId", OnSuccess = "updateGraph" }, new { id = "OccurrenceForm" }))
           { %>

           <%: Html.HiddenFor(x => x.OccurrenceStatisticsType) %>
        <% } %>

        <% using (Ajax.BeginForm("GetSpeciesStatistics", null, new AjaxOptions { UpdateTargetId = "StatisticsResult", LoadingElementId = "LoadingId", OnSuccess = "updateGraph"}, new { id = "SpeciesForm" }))
           { %>

           <%: Html.HiddenFor(x => x.SpeciesStatisticsType) %>
        <% } %>
        </div>

        <div class="four columns">
            <h3><%: Strings.Occurrences %></h3>
            <ul>
            <% foreach (var value in Enum.GetValues(typeof (OccurrenceStatisticsType)))
            { %>
                <li><a class="<%: ViewData["actionButtonBase"] %> full-width" href="javascript:getOccurrenceStatistics('<%= value %>');"><%: Strings.ResourceManager.GetString(value.ToString()) %></a></li>
            <% } %>

        </ul>
        </div>
        <div class="four columns">
            <h3><%: Strings.Species %></h3>
                <ul>
                <% foreach (var value in Enum.GetValues(typeof (SpeciesStatisticsType)))
                { %>
                    <li><a class="<%: ViewData["actionButtonBase"] %> full-width" href="javascript:getSpeciesStatistics('<%= value %>');"><%: Strings.ResourceManager.GetString(value.ToString()) %></a></li>
                <% } %>

            </ul>
        </div>
    </div>
    <div class="clear">
    </div>
    <div class="row">
        <div id="StatisticsResult" class="four columns">
        </div>
        <div id="chartContainer" class="eight columns" style="background-color:transparent;">
        </div>
    </div>
    <script type="text/javascript">
        var selected = "#OccurrenceStatisticsType";
        var title = {};
        <% foreach (var value in Enum.GetValues(typeof (OccurrenceStatisticsType))){ %>title['<%: value%>'] = '<%= Strings.ResourceManager.GetString(value.ToString()) %>';<% } %>
        <% foreach (var value in Enum.GetValues(typeof (SpeciesStatisticsType))){ %>title['<%: value%>'] = '<%= Strings.ResourceManager.GetString(value.ToString()) %>';<% } %>

        $(document).ready(function () {
            if (!$.browser.mozilla) $("form").submit(function (event) { eval($(this).attr("onsubmit")); return false; });
        });
        function getOccurrenceStatistics(type) {
            $("#OccurrenceStatisticsType").val(type);
            $("#OccurrenceForm").submit();
            selected = "#OccurrenceStatisticsType";
        }
        function getSpeciesStatistics(type) {
            $("#SpeciesStatisticsType").val(type);
            $("#SpeciesForm").submit();
            selected = "#SpeciesStatisticsType";
        }
        Highcharts.visualize = function (options) {
            var max_others = 15
            // the categories
            options.xAxis.categories = [];
            series_data = [];
            others = 0;
            has_others = 0;
            $('.dict_table tbody tr > td').each(function (i) {
                if (i / 2 == Math.floor(i / 2)) {
                    if (i>=max_others*2) {
                        has_others = 1;
                    }
                    else {
                        options.xAxis.categories.push(this.innerHTML);
                    }
                }
                else {
                    if (i>=max_others*2) {
                        others += parseInt(this.innerHTML);
                    }
                    else {
                        series_data.push(parseInt(this.innerHTML));
                    }
                }
            });
            if (has_others) {
                options.xAxis.categories.push('Other');
                series_data.push(others);
            }
            options.series = [];
            options.series[0] = {
                name: '<%: Strings.Occurrences %>',
                data: series_data
            };

            var chart = new Highcharts.Chart(options);
        }

        function updateGraph(data) {
	        options = {
	            chart: {
	                renderTo: 'chartContainer',
	                type: 'column'
	            },
	            title: {
	                text: title[$(selected).val()]
	            },
	            xAxis: {
			        labels: {
				        rotation: 45,
				        align: 'left',
				        style: {
					        font: 'normal 10px Verdana, sans-serif'
				        },
                        formatter: function() {
                            str = this.value;
                            str = str.replace('Parque Estadual','P.E.');
                            str = str.replace('Reserva Florestal','R.F.');
                            str = str.replace('Estação Ecológica','E.E.');
                            str = str.replace('Reserva biológica','R.B.');
                            return str;
                        }
			        },
                    showLastLabel: true,
                    showFirstLabel:true
	            },
	            yAxis: {
	                title: {
	                    text: '<%: Strings.Occurrences %>'
	                }
	            },
	            tooltip: {
	                formatter: function () {
	                    return '<b>' + this.x + ':</b> ' + this.y + ' <%: Strings.Occurrences%>';
	                }
	            }
	        };

            Highcharts.visualize(options);
        }
        
    </script>
</asp:Content>
